<template>
	<view class="box">
		<!-- <view @touchmove.stop.prevent>
			<view @click="open" class="box" style="z-index: 999;" :style="{top: top + 'px', right: right + 'px'}"
						@touchmove="touchmove" @touchend="touchend" :animation="animationData">
				<image src="https://labulado.oss-cn-guangzhou.aliyuncs.com/service.png" mode="aspectFill"></image>
			</view>
		</view> -->
		<button class="kefu-btn" open-type="contact">
			联系客服
		</button>
		<image class="kefu-img" src="https://labulado.oss-cn-guangzhou.aliyuncs.com/service.png" mode="aspectFill"></image>
	</view>
</template>
<script>
export default {
	name: 'CustomerService',
	data() {
		return {
			isShow: false,
			top: 350,
			left: 3,
			right: 3,
			isLeft: true,
			animationData: ''
		}
	},
	methods: {
		open() {
			wx.openCustomerServiceChat({
				extInfo: {
					url: 'https://work.weixin.qq.com/kfid/kfce7c0eee5cc02e841'
				},
				corpId: 'ww07ad09d089966f33',
				success(res) {
					console.log('打开客服', res)
				},
				fail(err) {
					console.error('打开客服', err)
				}
			})
		},
		touchmove: function (e) {
			if (this.isShow) {
				return
			}
			const position = e.touches[0]
			const wHeight = this.getSystemInfo('H')
			if (position.pageY > 100 && position.pageY + 100 < wHeight) {
				this.top = position.pageY - 20
			}
			this.left = position.pageX
		},
		touchend: function (e) {
			const wWidth = this.getSystemInfo('W')
			const pageX = e.changedTouches[0].clientX
			if (pageX > wWidth * 0.5) {
				this.isLeft = false
				this.left = wWidth - 50
			} else {
				this.isLeft = true
				this.left = 3
			}
		},
		getSystemInfo: function (type) {
			let result
			const screen = uni.getSystemInfoSync()
			const wHeight = screen.windowHeight
			const wWidth = screen.windowWidth
			switch (type) {
				case 'H':
					result = wHeight
					break
				case 'W':
					result = wWidth
					break
				default:
					result = 'Err'
			}
			return result
		},
	}
}

</script>

<style lang="scss">
.kefu-img {
	width: 100%;
	height: 100%;
	z-index: 1000;
}

.box {
	position: fixed;
	right: 20rpx;
	bottom:300rpx;
	width: 80upx;
	height: 80upx;
	background: #fff;
	z-index: 1000;
	border-radius: 50%;
	box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
}

	.kefu-btn {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1;
		opacity: 0;
	}
</style>
